

import React, { useRef, useState } from "react"
import styles from './login.module.scss'
let checkLoginNum = 0
let checkLoginStatusTimeout = 0
export function LoginQq(props:{loginType: string; loginMode: string;getUserInfo: (arg0: boolean) => void;}) {
    const { loginType, loginMode } = props
    
    const qqRefer = useRef<HTMLSpanElement>(null)

    const checkLoginStatus = (isInit = 0, isLoop = 0)=> {
        if (isInit) {
            checkLoginNum = 0;
        }
        checkLoginNum++;
        if (checkLoginNum < 31) {
            if (isLoop) {
                checkLoginStatusTimeout = window.setTimeout(function () {
                    checkLoginStatusTimeout && clearTimeout(checkLoginStatusTimeout);
                    checkLoginStatus(0, 1);
                }, 1000);
            }
        }
    }
    /**
     * qq登录（点击事件）
     * @param e
     */
    const qqReferClickEvent = (e:React.MouseEvent<HTMLSpanElement>)=> {
        let qqReferDom = qqRefer.current as HTMLSpanElement;
        let qqUrl = qqReferDom.getAttribute('data-href') as string;
        window.open(qqUrl, "", "width=750, height=500, top=50, left=50");
        checkLoginStatus(1, 1);
        e.stopPropagation();
        e.nativeEvent.stopPropagation();
    }
    return (
        <div className={styles.resQqLogin}>
            <span id="qq_refer" className={styles.QqRefer} ref={qqRefer} onClick={qqReferClickEvent}
                data-href={`//818ps.com/site/auth?authclient=qq&refer=${'https://818ps.com/aihua'}`}>
                <span className={`iconfont ${styles.iconEnroll} icon-QQ`}>
                    {loginType !== 'qq' && loginMode == 'qq' &&
                        <div className={styles.loginmode}
                            style={{
                                right: -65,
                            }}>
                            <div className={styles.loginArrow}></div>
                            <div className={styles.loginText}>上次登录</div>
                        </div>
                    }
                </span>QQ登录
            </span>
        </div>
    )
}